<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 和元素有关的内容 ： width 、height 、left 、top 
        // 和鼠标坐标有关的距离，获取鼠标的位置 ： x、y
        // 一、offsetX  offsetY：和鼠标的事件触发有关
        // 是鼠标相对于点击元素的左边和上边的距离
        // 鼠标触发事件的时候相对于触发元素的距离
        // var  boxEle = document.querySelector(".box");
        // boxEle.onclick = function(e){  // 绑定了点击事件
        //     var e = e || window.event;
        //     console.log("左边的距离",e.offsetX);
        //     console.log("上边的距离",e.offsetY);
        // }


        // 二、clientX 和 clientY
        // 鼠标触发事件的时候相对于浏览器的上边 和左边的距离
        var  boxEle = document.querySelector(".box");
        boxEle.onclick = function(e){  // 绑定了点击事件
            var e = e || window.event;
            console.log("左边距离浏览器",e.clientX);
            console.log("上边距离浏览器",e.clientY);
        }


        /* 
        总结 ：
            一、鼠标的距离，和鼠标触发事件有关
                1.offsetX/offsetY : 相对于触发元素的 左边 和上边的距离
                2.clientX / clientY ： 相对于浏览器的鼠标的距离

            二、和元素有关和鼠标事件触发无关
            offsetWidth Height  : 自身 + 内边距  + 边框
            clientWidht Height : 自身 + 内边距
            offsetTop Left ： 
                            1.没有定位 相对浏览器的偏移量
                            2.有定位 相对于定位父级
            clientLeft Top ： 左边框和上边框的宽度。
        
        
        */
    </script>
</body>
</html>